<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<%
String v = Math.random() + "";
request.setAttribute("v", v);
%>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TechNews - HTML and CSS Template</title>
<!-- Bootstrap -->
<link href="/News/assets/css/bootstrap.min.css?v=${v}" rel="stylesheet">
<!-- Theme Style -->

<link href="/News/assets/css/style.css?v=${v}" rel="stylesheet">
</head>

<body id="page-top" data-spy="scroll" data-target=".navbar">
	<div id="main-wrapper">
		<!-- Page Preloader -->
		<div id="preloader">
			<div id="status">
				<div class="status-mes"></div>
			</div>
		</div>
		<!-- preloader -->

		<div class="uc-mobile-menu-pusher">
			<div class="content-wrapper">
				<section id="header_section_wrapper" class="header_section_wrapper">
					<div class="container">
						<div class="header-section">
							<div class="row">
								<div class="col-md-4">
									<div class="left_section">
										<span class="date"> </span>
										<!-- Date -->
										<span class="time"> </span>
										<!-- Time -->
										<div class="social">
											<a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a>
											<!--Twitter-->
											<a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a>
											<!--Google +-->
											<a class="icons-sm inst-ic"><i class="fa fa-instagram">
											</i></a>
											<!--Linkedin-->
											<a class="icons-sm tmb-ic"><i class="fa fa-tumblr"> </i></a>
											<!--Pinterest-->
											<a class="icons-sm rss-ic"><i class="fa fa-rss"> </i></a>
										</div>
										<!-- Top Social Section -->
									</div>
									<!-- Left Header Section -->
								</div>
								<div class="col-md-4">
									<div class="logo">
										<a href="index.jsp"><img src="assets/img/logo.png"
											alt="Tech NewsLogo"width="200px" height="50px"></a>
									</div>
									<!-- Logo Section -->
								</div>
								<div class="col-md-4">
									<div class="right_section">
										<ul class="nav navbar-nav">
											<li><a href="News/login.jsp">登录</a></li>
											<li><a href="register.jsp">注册</a></li>

										</ul>
										<!-- Language Section -->

										<!-- Search Section -->
									</div>
									<!-- Right Header Section -->
								</div>
							</div>
						</div>
						<!-- Header Section -->

						<div class="navigation-section">
							<nav class="navbar m-menu navbar-default">
								<div class="container">
									<!-- Brand and toggle get grouped for better mobile display -->
									<div class="navbar-header">
										<button type="button" class="navbar-toggle collapsed"
											data-toggle="collapse" data-target="#navbar-collapse-1">
											<span class="sr-only">Toggle navigation</span> <span
												class="icon-bar"></span> <span class="icon-bar"></span> <span
												class="icon-bar"></span>
										</button>
									</div>
									<!-- Collect the nav links, forms, and other content for toggling -->
									<div class="collapse navbar-collapse" id="#navbar-collapse-1">
										<ul class="nav navbar-nav main-nav">
											<li class="active"><a href="index.jsp">首页</a></li>
											<li><a href="/News/NewsCategoryServlet?newsType=移动设备">移动设备</a></li>
											<li><a href="/News/NewsCategoryServlet?newsType=平板电脑">平板电脑</a></li>
											<li><a href="/News/NewsCategoryServlet?newsType=产品">产品</a></li>
											<li><a href="/News/NewsCategoryServlet?newsType=照相机">照相机</a></li>
											<li><a href="/News/NewsCategoryServlet?newsType=设计">设计</a></li>
											<li><a href="/News/NewsCategoryServlet?newsType=其他">其他新闻</a></li>

										</ul>
									</div>
									<!-- .navbar-collapse -->
								</div>
								<!-- .container -->
							</nav>
							<!-- .nav -->
						</div>
						<!-- .navigation-section -->
					</div>
					<!-- .container -->
				</section>
				<!-- header_section_wrapper -->


				<div class="container">
					<div class="row">
						<div class="col-md-8">
							<c:forEach items="${categoryMap.get('date').data }" var="news"
								varStatus="num">

								<div class="entity_wrapper">
									<div class="entity_title header_purple">
										<h1>
											<a href="/News/NewsSingleServlet?newsId=${news.newsId}"
												target="_blank">${news.newsType }</a>
										</h1>
									</div>
									<!-- entity_title -->

									<div class="entity_thumb">
										<img class="img-responsive"
											src="/News/assets/img/news/${news.newsImg }"
											alt="feature-top">
									</div>
									<!-- entity_thumb -->

									<div class="entity_title">
										<a href="/News/NewsSingleServlet?newsId=${news.newsId}"
											target="_blank"><h3>${news.newsHeadline }</h3></a>
									</div>
									<!-- entity_title -->

									<div class="entity_meta">
										<a href="#">${news.newsDate }</a>, 作者: <a href="#">${news.newsAuthor }</a>
									</div>
									<!-- entity_meta -->

									<div class="entity_content">${news.newsIntro }</div>
									<!-- entity_content -->

									<div class="entity_social">
										<span><i class="fa fa-share-alt"></i>${news.newsHeat }
											<a href="#">分享</a> </span> <span><i class="fa fa-comments-o"></i>${news.newsReviewNum }
											<a href="#">评论</a> </span>
									</div>
									<!-- entity_social -->

								</div>

							</c:forEach>
							<!-- row -->

							<nav aria-label="Page navigation" class="pagination_section">
								<ul class="pagination">
									<c:if test="${categoryMap.get('date').currentPageNum>1 }">
										<li><a
											href="/News/NewsCategoryServlet?currentPageNum=${categoryMap.get('date').currentPageNum-1 }&pageSize=5"
											aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
										</a></li>
									</c:if>
									<c:forEach begin="1" end="${categoryMap.get('date').pageNum }"
										varStatus="stats">
										<li><a
											href="/News/NewsCategoryServlet?currentPageNum=${stats.index }&pageSize=5&newsType=${categoryMap.get('newsType')}">${stats.index }</a>&nbsp;</li>

									</c:forEach>
								</ul>
							</nav>
							<!-- navigation -->


						</div>
						<!-- col-md-8 -->

						<div class="col-md-4">
							<div class="widget">
								<div class="widget_title widget_black">
									<h2>
										<a>热门新闻</a>
									</h2>
								</div>
								<c:forEach
									items="${categoryMap.get('queryRightNewsHeatNumList') }"
									var="news">
									<div class="media">
										<div class="media-left">
											<a href="/News/NewsSingleServlet?newsId=${news.newsId}"><img
												class="media-object"
												src="/News/assets/img/news/${news.newsImg }"
												alt="Generic placeholder image"></a>
										</div>
										<div class="media-body">
											<h3 class="media-heading">
												<a href="/News/NewsSingleServlet?newsId=${news.newsId}"
													target="_blank">${news.newsHeadline }</a>
											</h3>
											<span class="media-date"><a href="#">${news.newsDate }</a>,
												by: <a href="#">${news.newsAuthor }</a></span>

											<div class="widget_article_social">
												<span> <a href="single.jsp" target="_blank"><i
														class="fa fa-share-alt"></i>${news.newsHeat }</a> 分享
												</span> <span> <a href="single.jsp" target="_blank"><i
														class="fa fa-comments-o"></i>${news.newsReviewNum }</a> 评论
												</span>
											</div>
										</div>
									</div>
								</c:forEach>
								<p class="widget_divider">
									<a href="category.jsp" target="_blank">更多精彩新闻&nbsp;&raquo;</a>
								</p>
							</div>
							<!-- Popular News -->

							<div class="widget hidden-xs m30">
								<img class="img-responsive widget_img"
									src="/News/assets/img/news01.png" alt="add_one" width="300px"
									height="250px" />
							</div>
							<!-- Reviews News -->

							<div class="widget hidden-xs m30">
								<img class="img-responsive widget_img"
									src="/News/assets/img/news01.png" alt="add_one" width="300px"
									height="250px" />
							</div>
							<!-- Advertisement -->


							<div class="widget m30">
								<div class="widget_title widget_black">
									<h2>
										<a>评论最多</a>
									</h2>
								</div>
								<c:forEach items="${categoryMap.get('queryNewsReviewNum') }"
									var="news">
									<div class="media">
										<div class="media-left">
											<a href="/News/NewsSingleServlet?newsId=${news.newsId}"><img
												class="media-object" src="assets/img/news/${news.newsImg }"
												alt="Generic placeholder image"></a>
										</div>
										<div class="media-body">
											<h3 class="media-heading">
												<a href="/News/NewsSingleServlet?newsId=${news.newsId}"
													target="_blank">${news.newsHeadline }</a>
											</h3>

											<div class="media_social">
												<span><i class="fa fa-comments-o"></i><a href="#">${news.newsReviewNum }</a>
													评论</span>
											</div>
										</div>
									</div>
								</c:forEach>
								<p class="widget_divider">
									<a href="category.jsp" target="_blank">更多精彩新闻&nbsp;&nbsp;&raquo;
									</a>
								</p>
							</div>
							<!-- Most Commented News -->

							<div class="widget m30">
								<div class="widget_title widget_black">
									<h2>
										<a>关于我们</a>
									</h2>
								</div>
								<div class="widget_body">
									<a></a> <img class="img-responsive left"
										src="/News/assets/img/news01.png"
										alt="Generic placeholder image" />

									<p>科技视界新闻网是一家专注于科技领域报道的在线新闻平台。该网站涵盖了最新的科技发展、创新产品、
										照相机，设计等内容。通过科技视界新闻网，读者可以及时了解全球范围内的科技动态和重要事件</p>

									<p>我们致力于获取及时且准确的消息，网站定期发布深度报道、专题分析、独家采访和技术评论，为读者提供全面的视角和深度的理解。
										无论是关注科技行业动态的专业人士，还是对新技术和创新产生兴趣的普通读者，都能在科技视界新闻网上找到有价值的信息和观点。</p>
								</div>
							</div>
							<!-- Editor News -->
							<!--Advertisement -->
							<div class="widget hidden-xs m30">
								<img class="img-responsive add_img"
									src="/News/assets/img/news01.png" alt="add_one" width="125px"
									height="125px" /> <img class="img-responsive add_img"
									src="/News/assets/img/news01.png" alt="add_one" width="125px"
									height="125px" /> <img class="img-responsive add_img"
									src="/News/assets/img/news01.png" alt="add_one" width="125px"
									height="125px" /> <img class="img-responsive add_img"
									src="/News/assets/img/news01.png" alt="add_one" width="125px"
									height="125px" />
							</div>
							<!--Advertisement -->

							<div class="widget m30">
								<div class="widget_title widget_black">
									<h2>
										<a>关于新闻</a>
									</h2>
								</div>
								<div class="widget_body">
									<img class="img-responsive left"
										src="/News/assets/img/news01.png"
										alt="Generic placeholder image" />

									<p>新闻是向公众传播最新事件和信息的媒介。它涵盖了从全球政治、经济到科技、文化和体育等多个领域的重要发展。新闻可以通过多种平台传播，包括电视、广播、报纸、互联网以及社交媒体。
										新闻的核心在于及时性和准确性。优质的新闻报道不仅要迅速提供信息，还要确保信息的真实性和完整性，帮助公众了解世界发生的变化，并对社会有所反馈。</p>

									<p>在数字时代，新闻的传播速度和影响力都得到了极大的增强，人们可以通过智能手机和其他数字设备即时接收到世界各地的新闻。然而，这也带来了信息过载和假新闻的挑战，要求公众和新闻机构都需要具备辨识和处理这些问题的能力。</p>
								</div>
							</div>
							<!--  Readers Corner News -->
						</div>
						<!-- col-md-4 -->

					</div>
					<!-- row -->

				</div>

				<!-- Subscriber Section -->
				<section id="footer_section" class="footer_section">
					<div class="footer_bottom_Section">
						<div class="container">
							<div class="row">
								<div class="footer">
									<div class="col-sm-3">
										<div class="social">
											<a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a>
											<!--Twitter-->
											<a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a>
											<!--Google +-->
											<a class="icons-sm inst-ic"><i class="fa fa-instagram">
											</i></a>
											<!--Linkedin-->
											<a class="icons-sm tmb-ic"><i class="fa fa-tumblr"> </i></a>
											<!--Pinterest-->
											<a class="icons-sm rss-ic"><i class="fa fa-rss"> </i></a>
										</div>
									</div>
									<div class="col-sm-6">
										<p>@科技视界新闻网</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
			<!-- #content-wrapper -->

		</div>
		<!-- .offcanvas-pusher -->

		<a href="#" class="crunchify-top"><i class="fa fa-angle-up"
			aria-hidden="true"></i></a>

		<div class="uc-mobile-menu uc-mobile-menu-effect">
			<button type="button" class="close" aria-hidden="true"
				data-toggle="offcanvas" id="uc-mobile-menu-close-btn">&times;</button>
		</div>
		<!-- .uc-mobile-menu -->

	</div>
	<!-- #main-wrapper -->
	<!-- jquery Core-->
	<script src="/News/assets/js/jquery-2.1.4.min.js"></script>
	<!-- Theme Script -->

	<script src="/News/assets/js/script.js"></script>
</body>
<c:if test="${categoryMap==null}">
	<script>
		location.href = "/News/NewsCategoryServlet?newsType=移动设备";
	</script>
</c:if>





<script type="text/javascript">
	function getDayOfWeek(day) {
		return [ '周日', '周一', '周二', '周三', '周四', '周五', '周六' ][day];
	}
	function updateTime() {
		var now = new Date();
		var startDay = getDayOfWeek(now.getDay());
		$(".date").text(startDay);
		$(".time").text(now);
	}
	setInterval(updateTime, 1000);
	updateTime();
</script>
</html>